<template>
  <div class="main info">
    <div class="sub-nav">
      <ul>
        <li :class="[{'active':activeIndex == i}]" @click="navClick(v,i)" v-for="(v,i) in list" :key="i">
          <span>{{v.name}}</span>
          <i class="el-icon-arrow-right"></i>
        </li>
      </ul>
    </div>
    <div class="info-list">
      <!-- <div class="sub-title">{{list[activeIndex].name}}</div> -->
      <div class="line"></div>
      <el-table @row-click="goDetail" height="541px" :show-header="false" :data="tableData" v-if="pranshow">
        <el-table-column prop="title" label="内容">
          <template slot-scope="scope">
            <p :class="[scope.row.titleFont===0?'fontWeight':scope.row.titleFont===1?'italic':scope.row.titleFont?'underline':'']"
              :style="{'color':color[scope.row.titleColor]}">
              {{scope.row.title}}</p>
          </template>
        </el-table-column>
        <el-table-column width="180" label="时间" prop="noticeTime">
        </el-table-column>
      </el-table>
      <!-- <div ref="container">
        <h2 v-if="detailData.title" class="info-title" style="text-align: center;">{{detailData.title}}
        </h2>
        <div class="sub-items" v-if="$route.query.type ==2">
          <span v-if="detailData.noticeTime">发表于：{{detailData.noticeTime}}</span>
          <span v-if="!print" class="fr pointer el-icon-printer" @click="printerArticle" style="float:right">打印页面
          </span>
          <span class="fr el-icon-view" style="float:right">浏览次数：{{detailData.hits ? detailData.hits  : 0}}
          </span>
        </div>
        <div class="ql-bubble">
          <div v-html="detailData.content" v-if="detailData.content" class="infoDetailsData ql-editor"></div>
        </div>
        <div class="noData" v-show="!detailData.content">
          暂无数据
        </div>

      </div> -->
      <div class="ql-bubble" v-if="!pranshow" style="height: 514px;">
        <div v-html="detailData.content" class="infoDetailsData ql-editor"></div>
      </div>
      <!-- <div class="noData" v-show="tableData.length<=0">
        暂无数据
      </div> -->
      <div class="center" v-if="pranshow">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
          layout="prev, pager, next" :total="totalNum">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { infoList } from '../../../api/info';
import { getInfoDetail, getSinDetail } from '../../../api/info';
export default {
  data () {
    return {
      color: ['#1793fc', '#76c941', '#2cbdb2', '#797fc9', '#ffb038', '#ff4f3e'],
      tableLoading: false,
      searchForm: {
        menuId: null,
        page: 1,
        size: 10
      },
      detailData: {
        content: ''
      },
      pranshow: false,
      totalNum: 0,
      tableData: [],
      activeIndex: 0,
      list: null,
    }


  },
  watch: {
    $route (val) {
      this.detailData = {
        content: ''
      }
      this.init();

    }
  },
  created () {
    this.init();
  },
  methods: {
    init () {
      let code = this.$route.query.code
      if (code) {
        this.list = JSON.parse(localStorage.getItem(`nav${code}`)) || []
      } else {

        this.list = JSON.parse(localStorage.getItem(`navCurrent`)) || []


      }

      this.list.forEach((v, i) => {
        if (v.id == this.$route.query.id) {
          this.activeIndex = i;
          this.detailData.content = decodeURI(v.content)
        }
      })
      this.searchForm.menuId = this.$route.query.id;
      if (this.$route.query.ptan) {
        this.pranshow = true
        this.queryInPage(1);
      } else {
        this.pranshow = false
      }
      // if (this.id == '15') {
      //   this.queryInPage(1);
      // } else {
      //   this.goDetail(this.$route.query.id)
      // }

    },
    navClick (v, i) {
      switch (v.type) {
        case 1: // 单文章
          // this.$router.push({
          //   path: `/infoDetail`,
          //   query: {
          //     id: v.id,
          //     type: 1
          //   }
          // })
          this.searchForm.menuId = v.id;
          this.activeIndex = i;

          this.detailData.content = decodeURI(v.content)

          this.$forceUpdate()
          console.log(this.detailData.content, 'content')
          // this.goDetail(v.id)
          // this.queryInPage(1);
          break;
        case 2: // 文章列表
          console.log(333)
          this.searchForm.menuId = v.id;
          this.activeIndex = i;
          this.queryInPage(1);
          break;
        case 3: // 超链接
          console.log(333111)
          window.open(v.url, '_blank')
          break;
      }
    },
    handleSizeChange (val) {
      this.searchForm.size = val;
      this.queryInPage();
    },
    handleCurrentChange (val) {
      this.searchForm.page = val;
      this.queryInPage();
    },
    queryInPage (page) {
      this.tableLoading = true;
      page ? this.searchForm.page = page : '';
      infoList(this.searchForm).then(data => {
        if (data.success) {
          this.tableData = data.data.records || [];
          this.totalNum = data.data.total || 0;
        } else {
          this.$message.error(`${data.msg}`);
        }
        this.tableLoading = false;
      });
    },
    // 点击进入详情页时判断type类型  type=1 本站公告 type=2 外部链接
    goDetail (row) {
      if (row.type == 1) {  // 本站公告
        this.$router.push({
          path: `/infoDetail`,
          query: {
            id: row.id,
            type: 2
          }
        })
      } else {  // 外部链接
        window.open(row.url)
      }


    }
  }
}
</script>

<style scoped>
.info {
    width: 1200px;
    margin: 0 auto;
}
.sub-nav {
    width: 312px;
    padding: 10px;
    background: #ffffff;
    margin-right: 16px;
    display: inline-block;
}
.sub-nav li {
    width: 100%;
    color: #222222;
    font-size: 14px;
    line-height: 40px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    padding: 0px 28px;
    list-style: none;
    cursor: pointer;
}

.sub-nav li i {
    color: #ccc;
    display: inline-block;
    width: 8px;
}

.active {
    background: #f2f7f9;
}
.sub-nav li span {
    display: inline-block;
    width: calc(100% - 8px);
}
.info-list {
    width: 852px;
    background: #ffffff;
    padding: 24px 44px;
    display: inline-block;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    vertical-align: top;
}
.sub-title {
    font-size: 16px;
    color: rgba(34, 34, 34, 1);
    font-weight: bold;
    margin-bottom: 20px;
}
.line {
    width: 100%;
    height: 1px;
    background: #cccccc;
}

.center {
    text-align: center;
    margin-top: 50px;
}
.noData {
    width: 98.6%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-top: 1px solid #e5e5e5;
    background: #ffffff;
}
.info-list .blue {
    color: #1793fc;
}
.info-list .fluorescentGreen {
    color: #76c941;
}
.info-list .wathet {
    color: #2cbdb2;
}
.info-list .violet {
    color: #797fc9;
}
.info-list .orange {
    color: #ffb038;
}
.info-list .red {
    color: #ff4f3e;
}
.info-list /deep/ .fontWeight {
    font-weight: bolder;
}
.info-list /deep/ .italic {
    font-style: italic;
}
.info-list /deep/.underline {
    text-decoration: underline;
}
</style>